<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 定义笔记项接口
interface NoteItem {
  id: number;
  date: string;
  activity: string;
  stats: Array<{ label: string; value: string }>;
  content: string;
  likes: number;
  images: string[];
  mediaTypes?: string[];
}

// 用户信息
const userInfo = ref({
  name: '健身达人',
  avatar: '/images/avatar.jpg'
});

// 笔记数据
const notes = ref<NoteItem[]>([
  // ... 现有笔记数据 ...
]);

// 当前笔记索引
const currentNoteIndex = ref(0);

// 简化导航函数
const navigate = (direction: 'prev' | 'next') => {
  const newIndex = direction === 'prev' 
    ? Math.max(0, currentNoteIndex.value - 1)
    : Math.min(notes.value.length - 1, currentNoteIndex.value + 1)
  currentNoteIndex.value = newIndex
}

// 合并图片处理函数
const handleImage = (event: Event, index: number, action: 'error' | 'load') => {
  if (action === 'error') {
    const img = event.target as HTMLImageElement
    if (!img.src.includes('placeholder')) {
      img.src = '/images/placeholder.jpg'
    }
  } else {
    console.log(`Image ${index} loaded successfully`)
  }
}

// 导航函数
const goToPrevNote = () => navigate('prev');
const goToNextNote = () => navigate('next');
const onImageError = (event: Event, index: number) => handleImage(event, index, 'error');
const onImageLoad = (event: Event, index: number) => handleImage(event, index, 'load');

// 返回上一页
const goBack = () => {
  router.back();
};

// 切换点赞状态
const toggleLike = () => {
  if (notes.value.length > 0) {
    notes.value[currentNoteIndex.value].likes += 1;
  }
};

// 加载笔记数据
const loadNotes = () => {
  // 这里可以添加从API加载笔记的逻辑
  // 目前使用静态数据
};

// 当前笔记的计算属性
const currentNote = computed(() => {
  if (notes.value.length === 0) {
    return {
      id: 0,
      date: new Date().toLocaleDateString(),
      activity: '未知活动',
      stats: [
        { label: "运动时间", value: "00:00:00" },
        { label: "运动消耗", value: "0千卡" }
      ],
      content: "还没有运动笔记，快去社区发布动态吧！",
      likes: 0,
      images: []
    }
  }
  return notes.value[currentNoteIndex.value];
});

onMounted(() => {
  loadNotes();
});
</script>

<template>
  <!-- 修改模板中的函数调用 -->
  <div class="notes-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="back-button" @click="goBack">
        <span class="back-icon">←</span> 我的笔记
      </div>
      <div class="note-counter" v-if="notes.length > 0">
        {{ currentNoteIndex + 1 }} / {{ notes.length }}
      </div>
    </div>

    <!-- 笔记卡片 -->
    <div class="note-card">
      <!-- 用户信息 -->
      <div class="user-info">
        <div class="avatar">
          <img :src="userInfo.avatar" alt="用户头像" />
        </div>
        <div class="user-details">
          <div class="user-id">{{ userInfo.name }}</div>
          <div class="post-date">{{ currentNote.date }}</div>
        </div>
      </div>

      <!-- 添加图片懒加载和错误处理 -->
      <!-- 将这段有问题的代码： -->
      <!-- 删除这个有问题的 img 标签 -->
      
      <!-- 活动类型 -->
      <div class="activity-type">{{ currentNote.activity }}</div>

      <!-- 运动数据 -->
      <div class="activity-stats">
        <div
          class="stat-item"
          v-for="(stat, index) in currentNote.stats"
          :key="index"
        >
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>

      <!-- 媒体内容 -->
      <div
        class="media-container"
        v-if="currentNote.images && currentNote.images.length > 0"
      >
        <div
          class="media-item"
          v-for="(image, index) in currentNote.images"
          :key="index"
        >
          <img
            v-if="
              !currentNote.mediaTypes ||
              currentNote.mediaTypes[index] === 'image'
            "
            :src="image"
            :alt="`运动图片${index + 1}`"
            class="activity-image"
            loading="lazy"
            @error="onImageError($event, index)"
            @load="onImageLoad($event, index)"
          />
          <video v-else :src="image" controls class="activity-video"></video>
        </div>
      </div>

      <!-- 默认地图和图片（当没有媒体时） -->
      <div class="media-container" v-else>
        <div class="map-view">
          <div class="map-placeholder">
            <svg width="100%" height="100%" viewBox="0 0 100 100">
              <path
                d="M20,80 C30,40 70,60 80,20"
                stroke="#4CAF50"
                stroke-width="3"
                fill="none"
              />
            </svg>
          </div>
        </div>
        <div class="activity-image">
          <img
            src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5"
            alt="默认运动图片"
          />
        </div>
      </div>

      <!-- 笔记内容 -->
      <div class="note-content">
        {{ currentNote.content }}
      </div>

      <!-- 互动区域 -->
      <div class="interaction-area">
        <div class="like-button" @click="toggleLike">
          <span class="like-icon">👍</span>
          <span class="like-count">{{ currentNote.likes }}</span>
        </div>
        <div class="comment-button">
          <span class="comment-icon">💬</span>
        </div>
        <div class="share-button">
          <span class="share-icon">→</span>
        </div>
      </div>

      <!-- 导航按钮 -->
      <div class="navigation-buttons" v-if="notes.length > 1">
        <button
          class="nav-btn"
          @click="goToPrevNote"
          :disabled="currentNoteIndex === 0"
        >
          上一条
        </button>
        <button
          class="nav-btn"
          @click="goToNextNote"
          :disabled="currentNoteIndex === notes.length - 1"
        >
          下一条
        </button>
      </div>
    </div>

    <!-- 空状态提示 -->
    <div class="empty-state" v-if="notes.length === 0">
      <div class="empty-icon">📝</div>
      <div class="empty-text">还没有运动笔记</div>
      <div class="empty-desc">去社区发布动态，会自动同步到这里哦！</div>
      <button class="go-community-btn" @click="router.push('/community')">
        去社区看看
      </button>
    </div>
  </div>
</template>

<style scoped>
.notes-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
}

.nav-bar {
  background-color: white;
  padding: 15px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.back-button {
  display: flex;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

.back-icon {
  margin-right: 8px;
  font-size: 18px;
}

.note-card {
  background-color: white;
  border-radius: 10px;
  margin: 15px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-id {
  font-weight: bold;
  font-size: 14px;
}

.post-date {
  font-size: 12px;
  color: #999;
}

.activity-type {
  font-weight: bold;
  margin-bottom: 10px;
}

.activity-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-weight: bold;
  font-size: 16px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.media-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.map-view {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
}

.activity-image {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  height: 150px;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.note-content {
  margin-bottom: 15px;
  padding: 5px 0;
}

.interaction-area {
  display: flex;
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

.like-button,
.comment-button,
.share-button {
  display: flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
}

.like-icon,
.comment-icon,
.share-icon {
  margin-right: 5px;
  font-size: 18px;
}

.like-count {
  font-size: 14px;
  color: #666;
}

.media-item {
  margin-bottom: 10px;
}

.activity-image,
.activity-video {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 10px;
}

.nav-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-btn:hover:not(:disabled) {
  background: #f5f5f5;
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 14px;
  margin-bottom: 24px;
}

.go-community-btn {
  padding: 12px 24px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.go-community-btn:hover {
  background: #45a049;
}
</style>